<template>
	<view class="notification">
		<template v-if="loginOrNot">
			<view class="menu" v-if="unreadQuantity">
				<view class="for" @click="$_To('notification/commentsAndEt')">
					<text class="iconfont icon-pinglun" style="background: #F56C6C;"></text>
					<text class="text">评论和@</text>
					<text class="digit" v-if="unreadQuantity.mentions || unreadQuantity.comments">
						{{unreadQuantity.mentions + unreadQuantity.comments}}
					</text>
					<text class="iconfont icon-arrow-double-right"></text>
				</view>
				<!-- <view class="for">
					<text class="iconfont icon-good" style="background: #409EFF;"></text>
					<text class="text">点赞</text>
					<text class="digit" v-if="unreadQuantity.likes">
						{{unreadQuantity.likes}}
					</text>
					<text class="iconfont icon-arrow-double-right"></text>
				</view>
				<view class="for">
					<text class="iconfont icon-fabulous" style="background: #E6A23C;"></text>
					<text class="text">粉丝</text>
					<text class="digit" v-if="unreadQuantity.follows">
						{{unreadQuantity.follows}}
					</text>
					<text class="iconfont icon-arrow-double-right"></text>
				</view> -->
			</view>
			<view class="public-title" style="border-top: 25rpx solid #F5F7FA;">
				<view class="icon"></view>
				<text class="text">私聊信息</text>
				<view class="more"></view>
			</view>
			<template v-if="listConversationState == 'success'">
				<view class="private-chat">
					<template v-for="(item,index) in listConversation">
						<view
							@click="$_To(`notification/conversationDetail?id=${item.id}&uid=${item.user.uid}`)"
							class="for">
							<view class="avatar"><image :src="item.user.avatar" mode="widthFix"></image></view>
							<view class="_center">
								<view class="_center-top">
									<text class="nickname">{{item.user.interaction.followNote?item.user.interaction.followNote:item.user.nickname}}</text>
									<text class="roleName">{{item.user.roleName}}</text>
									<text class="time">{{item.latestMessage.datetimeFormat}}</text>
									<text class="mark-note" @click.stop="clickMarkNoteBox(index,item.user.interaction.followNote)">备注</text>
								</view>
								<view class="_center-bottom">
									<text>{{$_filterHtml(item.latestMessage.message)}}</text>
								</view>
							</view>
							<view class="_right">
								<text v-if="item.unreadCount" style="color: #F56C6C;">{{item.unreadCount}}未读</text>
								<text
									@click.stop="clickDeleteConversation(item.id)"
									v-else>删除</text>
							</view>
						</view>
						<view class="input" v-if="narkNoteBox == index">
							<input type="text" v-model="vModelFollowNote" placeholder="留空为删除备注" placeholder-style="color: #C0C4CC;font-size: 22rpx;line-height: 22rpx;">
							<view @click="clickMarkNote(item.user.uid)">确认</view>
						</view>
					</template>
					<view
						@click="getConversationList('more')"
						class="more">点击加载更多</view>
				</view>
			</template>
			<template v-if="listConversationState == 'loading'">
				<view class="skeleton-screen">
					<view class="_left loading-css"></view>
					<view class="_right loading-css"></view>
				</view>
			</template>
			<template v-if="listConversationState == 'empty'">
				<public-empty></public-empty>
			</template>
		</template>
		<template v-else>
			<public-not-logged-in></public-not-logged-in>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unreadQuantity:null,//未读消息数量
				listConversation:[],
				listConversationState:"loading",
				listConversationPage:2,
				loginOrNot:false,
				vModelFollowNote:"",
				narkNoteBox:null,
			}
		},
		onShow() {
			this.loginOrNot = this.$_loginOrNot();
			if(uni.getStorageSync('user')){
				// 是否有通知
				this.$_isThereAnotification();
				setTimeout(()=>{
					this.getNotificationCommentNumber();
				},200);
			}else{
				uni.switchTab({
					url:"/pages/my/my"
				})
			}
		},
		onLoad() {
			
		},
		methods: {
			// 请求消息数量
			getNotificationCommentNumber(){
				this.$_Request(
					"GET","/api/v2/user/panel",{},
					(res) => {
						this.unreadQuantity = res.data.data.unreadNotifications;
						this.getConversationList();
					}
				)
			},
			// 请求私聊对话
			getConversationList(more){
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/conversation/list",
					{
						"whitelistKeys":"",
						"page":more == 'more' ? this.listConversationPage : "",
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.listConversation = this.listConversation.concat(res.data.data.list);
								this.listConversationPage++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.list.length){
								this.listConversation = res.data.data.list;
								this.listConversationState = "success"
							}else{
								this.listConversationState = "empty"
							}
						}
					}
				)
			},
			// 删除单个会话
			clickDeleteConversation(id){
				uni.showModal({
					title: "提示",
					content: "是否删除本会话？数据不可恢复哟",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading({ title: "删除中" });
							this.$_Request(
								"DELETE","/api/v2/conversation/delete",
								{
									"type":"conversation",
									"conversationId":id
								},
								(res_) => {
									uni.hideLoading();
									if(res_.data.code == 0){
										this.listConversationState = "loading";
										this.getConversationList();
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							)
						}
					}
				});
			},
			// 删除全部会话
			clickDeleteAll(item){
				let allId = [];
				for(let i = 0;i<item.length;i++){
					allId.push(item[i].id)
				}
				uni.showModal({
					title: "提示",
					content: "是否全部删除？不可恢复哟",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading({ title: "删除中" });
							this.$_Request(
								"DELETE","/api/v2/conversation/delete",
								{
									"type":"conversation",
									"conversationId":allId
								},
								(res_) => {
									uni.hideLoading();
									if(res_.data.code == 0){
										this.listConversationState = "loading";
										this.getConversationList();
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							)
						}
					}
				});
			},
			clickMarkNote(uid){
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/user/mark-note",
					{
						"interactionType":"follow",
						"markType":"user",
						"fsid":uid+"",
						"note":this.vModelFollowNote
					},
					(res) => {
						if(res.data.code == 0){
							this.narkNoteBox = null;
							uni.hideLoading();
							this.getConversationList();
						}else{
							uni.hideLoading();
							uni.showToast({
								title:"请先关注用户",
								icon:"none",
								duration:1000
							});
							setTimeout(()=>{
								this.$_To('user/user?uid=' + uid)
							},1000);
						}
					}
				)
			},
			clickMarkNoteBox(index,followNote){
				if(this.narkNoteBox == index){
					this.narkNoteBox = null
					this.vModelFollowNote = ""
				}else{
					this.narkNoteBox = index;
					if(followNote == 'null'){
						this.vModelFollowNote = ""
					}else{
						this.vModelFollowNote = followNote;
					}
				}
			}
		},
	}
</script>

<style lang="scss">
.notification{
	.menu{
		.for{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid $BeiJingSe;
			padding: 25rpx;
			.text{
				flex: 1;
				margin: 0 15rpx;
				line-height: 32rpx;
			}
			.digit{
				font-size: 28rpx;
				line-height: 28rpx;
				padding-right: 10rpx;
				color: $HongSe;
			}
			.icon-arrow-double-right{
				font-size: 30rpx;
				line-height: 30rpx;
				color: $ZhanWeiSe;
			}
		}
		.for{
			text:nth-child(1){
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFF;
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
				font-size: 40rpx;
				line-height: 40rpx;
			}
		}
	}
	.private-chat{
		.for{
			display: flex;
			align-items: center;
			padding: 25rpx;
			border-bottom: 1rpx solid $BeiJingSe;
			.avatar{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 100%;
				flex-shrink: 0;
				background: $BeiJingSe;
			}
			._center{
				height: 80rpx;
				flex: 1;
				margin: 0 15rpx;
				display: flex;
				justify-content: center;
				flex-flow: column;
				._center-top{
					display: flex;
					align-items: center;
					text{
						font-size: 32rpx;
						line-height: 32rpx;
					}
					.roleName{
						font-size: 22rpx;
						padding-left: 15rpx;
						color: $ZhanWeiSe;
					}
					.time{
						font-size: 22rpx;
						padding-left: 15rpx;
						color: $ZhanWeiSe;
					}
					.mark-note{
						font-size: 22rpx;
						padding-left: 15rpx;
						color: $ZhanWeiSe;
					}
				}
				._center-bottom{
					margin-top: 15rpx;
					text{
						display: -webkit-box;
						/*!autoprefixer:off*/
						-webkit-box-orient: vertical;
						/*autoprefixer:on*/
						-webkit-line-clamp: 1;
						overflow: hidden;
						font-size: 22rpx;
						line-height: 22rpx;
						color: $ZhanWeiSe;
					}
				}
			}
			._right{
				height: 80rpx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 22rpx;
				line-height: 22rpx;
				color: $ZhanWeiSe;
			}
		}
		.input{
			display: flex;
			align-items: center;
			input{
				flex: 1;
				height: 60rpx;
				background: $BeiJingSe;
				margin: 0rpx 25rpx 0 25rpx;
				text-align: center;
				border-radius: 5rpx;
				font-size: 22rpx;
				line-height: 22rpx;
			}
			view{
				width: 150rpx;
				height: 60rpx;
				margin: 25rpx 25rpx 25rpx 0;
				background: $LanSe;
				color: #FFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				line-height: 22rpx;
				border-radius: 5rpx;
			}
		}
		.more{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $ZhanWeiSe;
			padding: 35rpx 0;
		}
	}
}
.skeleton-screen{
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid $BeiJingSe;
	padding: 25rpx;
	._left{
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
		border-radius: 100%;
	}
	._right{
		flex: 1;
		height: 80rpx;
		margin-left: 15rpx;
	}
}
</style>
